<template>
    <view class="d-kuan d-kuan-du-0" :style="{width: kuan + 'px',height:'250px'}">
        <view class="d-kuan-du-1" :style="{width: totalWidth + 'px'}">

            <view class="d-waigao-20 d-beijing-baise d-yuanjiao-10 d-bianhua-10 d-you-20" :style="{width: kuan_1 + 'px'}">
                111
            </view>
            <view class="d-waigao-20 d-beijing-baise d-yuanjiao-10 d-bianhua-10 d-you-20" :style="{width: kuan_1 + 'px'}">
                222
            </view>
            <view class="d-waigao-20 d-beijing-baise d-yuanjiao-10 d-bianhua-10" :style="{width: kuan_1 + 'px'}">
                333
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        kuan: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            kuan_1: 0,
            totalWidth: 0,
            isDragging: false,
            startX: 0,
            scrollLeft: 0,
            scrollContainer: null
        }
    },
    watch: {
        kuan: {
            handler(newValue) {
                // 将kuan_1设置为kuan宽度的60%
                this.kuan_1 = newValue * 0.6;
                // 计算总宽度，确保内部内容足够宽以触发滚动
                this.totalWidth = this.kuan_1 * 3 + 40; // 3个元素加上边距
            },
            immediate: true
        }
    },
    mounted() {
        // 确保在DOM渲染完成后获取元素
        this.$nextTick(() => {
            // 获取滚动容器元素
            this.scrollContainer = this.$el.querySelector('.d-kuan-du-0');
            
            if (this.scrollContainer) {
                // 获取内部容器元素
                const innerContainer = this.$el.querySelector('.d-kuan-du-1');
                
                // 添加鼠标事件监听器 - 使用箭头函数确保this指向正确
                this.handleMouseDown = (e) => {
                    // 阻止事件冒泡，防止触发其他元素的事件
                    e.stopPropagation();
                    this.isDragging = true;
                    this.startX = e.clientX;
                    this.scrollLeft = this.scrollContainer.scrollLeft;
                    // 防止文本选择
                    document.body.style.userSelect = 'none';
                };
                
                this.handleMouseMove = (e) => {
                    if (!this.isDragging) return;
                    // 阻止默认行为
                    e.preventDefault();
                    e.stopPropagation();
                    const x = e.clientX;
                    const deltaX = x - this.startX;
                    this.scrollContainer.scrollLeft = this.scrollLeft - deltaX;
                };
                
                this.handleMouseUp = () => {
                    this.isDragging = false;
                    document.body.style.userSelect = '';
                };
                
                // 同时处理内部容器的鼠标事件
                this.handleInnerMouseDown = (e) => {
                    // 直接调用容器的鼠标按下处理函数
                    this.handleMouseDown(e);
                };
                
                // 绑定事件到外层滚动容器
                this.scrollContainer.addEventListener('mousedown', this.handleMouseDown);
                
                // 同时绑定事件到内层容器，确保点击内层也能触发拖拽
                if (innerContainer) {
                    innerContainer.addEventListener('mousedown', this.handleInnerMouseDown, { capture: true });
                }
                
                // 移动和释放事件绑定到document以确保流畅的拖拽体验
                document.addEventListener('mousemove', this.handleMouseMove);
                document.addEventListener('mouseup', this.handleMouseUp);
                
                // 同时支持触摸设备
                this.scrollContainer.addEventListener('touchstart', (e) => {
                    if (e.touches.length === 1) {
                        this.isDragging = true;
                        this.startX = e.touches[0].clientX;
                        this.scrollLeft = this.scrollContainer.scrollLeft;
                    }
                });
                
                this.scrollContainer.addEventListener('touchmove', (e) => {
                    if (!this.isDragging || e.touches.length !== 1) return;
                    const x = e.touches[0].clientX;
                    const deltaX = x - this.startX;
                    this.scrollContainer.scrollLeft = this.scrollLeft - deltaX;
                });
                
                this.scrollContainer.addEventListener('touchend', () => {
                    this.isDragging = false;
                });
            }
        });
    },
    beforeDestroy() {
        // 清理事件监听器
        if (this.scrollContainer) {
            this.scrollContainer.removeEventListener('mousedown', this.handleMouseDown);
            
            // 清理内部容器的事件监听器
            const innerContainer = this.$el.querySelector('.d-kuan-du-1');
            if (innerContainer && this.handleInnerMouseDown) {
                innerContainer.removeEventListener('mousedown', this.handleInnerMouseDown, { capture: true });
            }
            
            this.scrollContainer.removeEventListener('touchstart', this.handleMouseDown);
            this.scrollContainer.removeEventListener('touchmove', this.handleMouseMove);
            this.scrollContainer.removeEventListener('touchend', this.handleMouseUp);
        }
        document.removeEventListener('mousemove', this.handleMouseMove);
        document.removeEventListener('mouseup', this.handleMouseUp);
    },
}
</script>

<style scoped>
.d-kuan-du-0{
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    scroll-behavior: smooth;
    -ms-overflow-style: none;  /* IE 和 Edge */
    scrollbar-width: thin;  /* Firefox */
    user-select: none;
}

.d-kuan-du-0:active {
    cursor: grabbing;
}

/* 移除默认滚动条样式 */
.d-kuan-du-0::-webkit-scrollbar {
    height: 6px;
}

.d-kuan-du-0::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.d-kuan-du-0::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.d-kuan-du-0::-webkit-scrollbar-thumb:hover {
    background: #555;
}
.d-kuan-du-1{
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

/* 响应式样式：当屏幕宽度小于1220px时 */
@media screen and (max-width: 1220px) {
    .d-you-20 {
        margin-right: 20rpx;
    }
}
</style>